<template>
    <el-container>
        <el-main>
            <el-form label-width="100px" class="add-project-form" :model="project">
                <el-form-item label="项目名称">
                    <el-input v-model="project.name"></el-input>
                </el-form-item>
                <el-form-item label="项目描述">
                    <el-input type="textarea" v-model="project.desc"></el-input>
                </el-form-item>
                <el-form-item label="项目团队">
                    <el-input v-model="project.team"></el-input>
                </el-form-item>
                <el-form-item label="项目时间">
                    <div class="block">
                    <el-date-picker
                            v-model="projectTimes"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                    </el-date-picker>
                    </div>
                </el-form-item>
                <el-form-item label="项目状态">
                    <div class="block">
                        <el-tag v-for="(status, index) in projectStatusData"
                                :key="index" @click="changeProjectStatus(status.index)"
                                :type="project.status === status.index ? 'success' : 'info'">
                            {{status.name}}</el-tag>
                    </div>
                </el-form-item>
            </el-form>
        </el-main>
        <el-footer>
            <el-button @click="saveAndNextStep">确定并下一步</el-button>
            <el-button @click="back">取消</el-button>
        </el-footer>
    </el-container>
</template>
<script>
    import projectStatusData from '@/assets/config-data/ProjectStatus.json';
    export default {
        name: 'ProjectFirstStep',
        components: {
            PageHeader: () => import("@/views/common/PageHeader.vue")
        },
        data: function() {
            return {
                project: {
                    name: '',
                    desc: '',
                    team: '',
                    startTime: null,
                    endTime: null,
                    status: 0 //项目状态：0-需求，1-设计，2-编码，3-测试，4-试运行，5-结束
                },
                projectTimes: {
                    startTime: null,
                    endTime: null
                },
                projectStatusData: projectStatusData
            }
        },
        methods: {
            saveAndNextStep: function() {
                let self = this;
                let url = '/api/project/add';
                self.project.startTime = self.projectTimes.startTime;
                self.project.endTime = self.projectTimes.endTime;
                this.$http.post(url, self.project).then(res => {
                    this.$router.push({name: 'add-project-second-step',
                        query: {
                            projectId: res.id
                        }
                    });
                }).catch(err => {
                    console.log(err);
                });
            },
            changeProjectStatus: function (status) {
                this.project.status = status;
            },
            back: function() {
                this.$router.back();
            }
        }
    }
</script>
<style lang="scss" scoped>
.add-project-form{
    width: 80%;
    margin-left: 10%;
}
</style>
